<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>Peragro</title>

    <link rel="stylesheet" href="ui-darkness/jquery-ui-1.8rc3.custom.css" type="text/css" media="all" />


    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery-ui.js"></script>
    
    
    <script type="text/javascript" src="http://wayfarerweb.com/js/mapbox.js"></script>
    <script type="text/javascript" src="http://wayfarerweb.com/js/mousewheel.js"></script>


	<script type="text/javascript">

	$(document).ready(function () {
		
		
		$("#viewport").mapbox({mousewheel: true, layerSplit: 1});
		
		$('.mapcontent').each(function(layer, item)
    {
      var content = $(this);
      
      layer = layer +1;
      
      $('#mapcontentfact > img').each(function(i, item)
      {
        var copy = $(this).clone();
        
        var left = $(this).position().left;
        var top = $(this).position().top;
        
        copy.css({top: (Math.pow(2, layer)*top)+'px', left: (Math.pow(2, layer)*left)+'px'});
        
        copy.addClass("layer"+String(layer));
        
        content.append(copy);
      });
    });
		
		


 	});

	</script>
	
	<style type="text/css">
  .layer0 { position:absolute; float:left;  width: 32px; height: 32px; }
  .layer1 { position:absolute; float:left;  width: 64px; height: 64px; }
  .layer2 { position:absolute; float:left;  width: 128px; height: 128px; }
  .layer3 { position:absolute; float:left;  width: 256px; height: 256px; }
  .layer4 { position:absolute; float:left;  width: 512px; height: 512px; }
	</style>


</head>
<body>

      
  	<div id="viewport" style="position:relative; width: 420px; height: 640px; cursor: move; margin: 20px auto; overflow: hidden;">
      <div style="background: url(Mapphoria-small.jpg) no-repeat; width: 420px; height: 640px;">
          <!--top level map content goes here-->
          <div id="mapcontentfact">
          <img src="/assets/13/transcode/?format=image/jpeg&sizex=256&sizey=256&angley=-0.785&cameraType=ORTHO&cameraAngley=-0.72" title="House 1" class="layer0" style="top: 100px; left: 300px;" />
          <img src="/assets/13/transcode/?format=image/jpeg&sizex=256&sizey=256&angley=0.785&cameraType=ORTHO&cameraAngley=-0.72" title="House 2" class="layer0" style="top: 100px; left: 320px;" />
          <img src="/assets/13/transcode/?format=image/jpeg&sizex=256&sizey=256&angley=1.57&cameraType=ORTHO&cameraAngley=-0.72" title="House 3" class="layer0" style="top: 114px; left: 320px;" />
          </div>
      </div>
      <div style="height: 1280px; width: 840px;">
          <img src="Mapphoria.jpg" alt="" />
          <div class="mapcontent">
              <!--map content goes here-->
          </div>
  
      </div>
      <div style="height: 2560px; width: 1680px;">
          <img src="Mapphoria.jpg" alt="" />
           <div class="mapcontent">
              <!--map content goes here-->
          </div>
      </div>
      <div style="height: 5120px; width: 3360px;">
          <img src="Mapphoria.jpg" alt="" />
           <div class="mapcontent">
              <!--map content goes here-->
          </div>
      </div>
      <div style="height: 10240px; width: 6720px;">
          <img src="Mapphoria.jpg" alt="" />
           <div class="mapcontent">
              <!--map content goes here-->
          </div>
      </div>

    </div>
          


</body>
</html>
